<script>
init({
  title: 'Sticky Header',
  desc: 'User Plugin: bootstrap-table-sticky-header. An extension which provides a sticky header for the table when scrolling.',
  links: [
    'bootstrap-table.min.css',
    'extensions/sticky-header/bootstrap-table-sticky-header.css'
  ],
  scripts: [
    'bootstrap-table.min.js',
    'extensions/sticky-header/bootstrap-table-sticky-header.min.js'
  ]
})
</script>

<template>
  <div class="toolbar">
    <div class="radio">
      <label>
        <input
          type="radio"
          checked
          name="theadClasses"
        >
        <code>undefined</code>
      </label>
    </div>
    <div class="radio">
      <label>
        <input
          type="radio"
          name="theadClasses"
        >
        <code>table-light</code>
      </label>
    </div>
    <div class="radio">
      <label>
        <input
          type="radio"
          name="theadClasses"
        >
        <code>table-dark</code>
      </label>
    </div>
  </div>

  <table
    id="table"
    data-show-columns="true"
  ></table>
</template>

<script>
  const $table = $('#table')

  function buildTable ($el, cells, rows) {
    let i
    let j
    let row
    const columns = []
    const data = []

    for (i = 0; i < cells; i++) {
      columns.push({
        field: `field${i}`,
        title: `Cell${i}`,
        sortable: true
      })
    }
    for (i = 0; i < rows; i++) {
      row = {}
      for (j = 0; j < cells; j++) {
        row[`field${j}`] = `Row-${i}-${j}`
      }
      data.push(row)
    }

    const classes = $('.toolbar input:checked').next().text()

    $el.bootstrapTable('destroy').bootstrapTable({
      columns,
      data,
      showFullscreen: true,
      search: true,
      stickyHeader: true,
      stickyHeaderOffsetLeft: parseInt($('body').css('padding-left'), 10),
      stickyHeaderOffsetRight: parseInt($('body').css('padding-right'), 10),
      theadClasses: classes
    })
  }

  function mounted () {
    $('.toolbar input').change(function () {
      buildTable($table, 20, 50)
    })
    buildTable($table, 20, 50)
  }
</script>
